import { useLoaderData } from "@remix-run/react";
import {
  ChevronRight,
  ChevronLeftDoubleIcon,
} from "~/components/icons/library";
import { Button } from "~/components/shared/button";
import { usePagination } from "~/hooks/use-pagination";
import { tw } from "~/utils/tw";
import PerPageItemsSelect from "../list/pagination/per-page-items-select";

export const BookingPagination = ({ className }: { className?: string }) => {
  const { modelName, totalPaginationItems } = useLoaderData<{
    modelName: { singular: string; plural: string };
    totalPaginationItems: number;
  }>();

  const { page, goToPage, prevDisabled, perPage } = usePagination();

  // Calculate total pages based on the pagination items (kits + individual assets)
  const totalPages = Math.ceil(totalPaginationItems / perPage);

  // Override the nextDisabled based on our custom total pages calculation
  const customNextDisabled = page >= totalPages;

  return (
    <div
      className={tw(
        "flex flex-wrap items-center justify-center gap-3 px-1 pb-4 pt-3 md:px-4",
        className
      )}
    >
      <div className="inline-flex items-center rounded border border-gray-300 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]">
        <Button
          variant="secondary"
          size="sm"
          onClick={() => goToPage(1)}
          disabled={prevDisabled}
          className="rounded-none border-y-0 border-l-0 border-r border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
          aria-label="Go to page 1"
        >
          <ChevronLeftDoubleIcon />
        </Button>

        <Button
          variant="secondary"
          size="sm"
          onClick={() => goToPage(page - 1)}
          disabled={prevDisabled}
          className="h-8 w-10 rotate-180 rounded-none border-y-0 border-l border-r-0 border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
          aria-label="Go to previous page"
        >
          <ChevronRight />
        </Button>

        <div className="flex items-center gap-2 px-2.5 py-[4px] leading-none text-gray-400">
          <span className="whitespace-nowrap text-[14px] font-medium text-gray-500">
            Page
          </span>
          <span className="whitespace-nowrap text-[14px] font-semibold text-gray-700">
            {page}
          </span>
          <span className="whitespace-nowrap text-[14px] font-medium text-gray-500">
            of
          </span>
          <span className="whitespace-nowrap text-[14px] font-semibold text-gray-700">
            {totalPages === 0 ? 1 : totalPages}
          </span>
        </div>

        <Button
          variant="secondary"
          size="sm"
          onClick={() => goToPage(page + 1)}
          disabled={customNextDisabled}
          className="h-8 w-10 rounded-none border-y-0 border-l border-r-0 border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
          aria-label="Go to next page"
        >
          <ChevronRight />
        </Button>

        <Button
          variant="secondary"
          size="sm"
          onClick={() => goToPage(totalPages)}
          disabled={customNextDisabled}
          className="rotate-180 rounded-none border-y-0 border-l-0 border-r border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
          aria-label="Go to last page"
        >
          <ChevronLeftDoubleIcon />
        </Button>
      </div>
      <div className="flex items-center gap-2">
        <PerPageItemsSelect />
        <p className="hidden text-[14px] font-medium text-gray-500 lg:block">
          <span className="capitalize">{modelName.plural}</span> per page
        </p>
      </div>
    </div>
  );
};
